﻿@page "/query-builder/grid"

@using Syncfusion.Blazor.QueryBuilder
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor
@using BlazorDemos
@using ej2_blazor_querybuilderdata

@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the integration of the Grid component to showcase data population based on the created filters using the QueryBuilder component.</p>
</SampleDescription>
<ActionDescription>
   <p>This sample illustrates how to integrate the Data Grid component with the QueryBuilder.</p>
   <p>The Grid component will be refreshed while editing the filters in QueryBuilder.</p>
   <p>More information about Blazor QueryBuilder component can be found in this <a target=""_blank"" href="https://blazor.syncfusion.com/documentation/query-builder/getting-started/">documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <SfQueryBuilder @ref="querybuilder" TValue="HardWareDetails" DataSource="@dataSource">
        <QueryBuilderRule Condition="and" Rules="@importRules"></QueryBuilderRule>
        <QueryBuilderEvents TValue="HardWareDetails" Created="created" RuleChanged="updateRule"></QueryBuilderEvents>
        <QueryBuilderColumns>
            <QueryBuilderColumn Field="TaskID" Label="Task ID" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.Number></QueryBuilderColumn>
            <QueryBuilderColumn Field="Name" Label="Name" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String></QueryBuilderColumn>
            <QueryBuilderColumn Field="Category" Label="Category" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String></QueryBuilderColumn>
            <QueryBuilderColumn Field="SerialNo" Label="Serial No" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String></QueryBuilderColumn>
            <QueryBuilderColumn Field="InvoiceNo" Label="Invoice No" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String></QueryBuilderColumn>
            <QueryBuilderColumn Field="Status" Label="Status" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String></QueryBuilderColumn>
        </QueryBuilderColumns>
    </SfQueryBuilder>
</div>
<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid TValue="HardWareDetails" DataSource="@gridData" AllowPaging="true">
                <GridEvents Created="created" TValue="HardWareDetails"></GridEvents>
                <GridColumns>
                    <GridColumn Field=@nameof(HardWareDetails.TaskID) HeaderText="TaskID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(HardWareDetails.Name) HeaderText="Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(HardWareDetails.Category) HeaderText="Category" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(HardWareDetails.SerialNo) HeaderText="Serial No" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(HardWareDetails.InvoiceNo) HeaderText="Invoice No" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(HardWareDetails.Status) HeaderText="Status" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>

@code{
    private SfQueryBuilder<HardWareDetails> querybuilder;
    private IEnumerable<HardWareDetails> gridData { get; set; }
    private IEnumerable<HardWareDetails> dataSource { get; set; }

    protected override void OnInitialized()
    {
        dataSource = HardWareDetails.GetAllRecords();
    }
    private void created()
    {
        gridData = querybuilder.GetFilteredRecords().ToList().AsEnumerable<HardWareDetails>();
    }

    private List<RuleModel> importRules = new List<RuleModel>()
    {
        new RuleModel { Field = "Category", Label = "Category", Value = "Laptop", Operator = "equal", Type = "String" }
    };

    private void updateRule(Syncfusion.Blazor.QueryBuilder.RuleChangeEventArgs args)
    {
        if (querybuilder.GetValidRules().Rules.Count > 0)
        {
            gridData = querybuilder.GetFilteredRecords().ToList().AsEnumerable<HardWareDetails>();
        } else
        {
            gridData = HardWareDetails.GetAllRecords();
        }
        StateHasChanged();
    }
}

<style>
    .e-grid {
        margin: 0 auto;
    }

    .control-section {
        min-height: auto;
    }
</style>